<template>
  <div class="jurisdiction-admin">
    <div class="header">
      <div class="flex-b">
        <el-button type="primary" @click="onOperation({}, 'add')" class="mb20"
          ><el-icon style="margin-right: 2px"><Plus /></el-icon
          >新增管理员</el-button
        >
      </div>
    </div>
    <el-table
      :data="list"
      :cell-style="{ background: '#fff' }"
      class="all-table"
      style="width: calc(100% - 40px); margin-left: 20px"
    >
      <el-table-column label="序号" prop="id" align="center" />
      <el-table-column label="管理员名称" prop="userName" align="center" />
      <el-table-column label="账号" prop="userId" align="center" />
      <el-table-column label="密码" prop="password" align="center" />
      <el-table-column label="角色" prop="createId" align="center" />
      <el-table-column label="创建时间" prop="createTime" align="center" />
      <el-table-column label="状态" align="center">
        <template #default="scope">
          {{ scope.row.status.code === 1 ? '启用' : '禁用' }}
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" align="center">
        <template #default="scope">
          <span
            @click="changeAdministrator(scope.row)"
            class="theme-color cursor"
            >{{ scope.row.status.code == 0 ? "启用" : "禁用" }}
          </span>
          <span
            @click="onOperation(scope.row, 'edit')"
            class="theme-color cursor ml20"
            >编辑
          </span>
          <span
            @click="onOperation(scope.row, 'del')"
            class="theme-color cursor ml20"
          >
            删除
          </span>
        </template>
      </el-table-column>
    </el-table>
    <h-page
      v-if="total"
      v-model:curr-page="params.current"
      :size="params.size"
      :total="total"
    />
  </div>
</template>

<script>
import { defineComponent, toRefs, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { baseMsg, elMessageTip } from "@/utils/utils";
import {
  GetAdminList,
  UpdateAdministrator,
  GetRoleListAll,
  DeleteAdministrator,
} from "@/api/system";

export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      total: 0,
      list: [],
      params: {
        roleId: route.query.roleId || "",
        status: route.query.status || "",
        current: Number(route.query.page) || 1,
        size: Number(route.query.size) || 10,
      },
    });
    const GetList = () => {
      GetAdminList(state.params).then((res) => {
        if (res.code == 4201 || res.code == 4202) {
          state.list = res.data.records;
          state.total = res.data.total;
        }
      });
    };
    watch(
      () => route.query,
      () => {
        state.params.current = Number(route.query.page) || 1;
        GetList();
      },
      { deep: true }
    );

    const onOperation = (i, type) => {
      if (type == "del") {
        elMessageTip({
          ok() {
            DeleteAdministrator({
              id: i.id,
            }).then((res) => {
              if (res.code == 4202) {
                baseMsg("删除成功");
                GetList();
              }
            });
          },
        });
      } else {
        router.push({
          path: "/quanxian/guanliyuanEdit",
          query: {
            id: i.id,
            type,
          },
        });
      }
    };
    GetList();
    const changeAdministrator = (item) => {
      let params = {
        ...item,
      };
      UpdateAdministrator(params).then((res) => {
        if (res.code == 4201 || res.code == 4202) {
          baseMsg("修改成功");
          GetList();
        }
      });
    };
    return {
      ...toRefs(state),
      GetList,
      onOperation,
      changeAdministrator,
    };
  },
});
</script>
<style lang="scss">
.jurisdiction-admin {
  background-color: #fff;
  padding: 20px 0;
  box-sizing: border-box;
  .tabs {
    padding: 0 20px;
    box-sizing: border-box;
  }
  .header {
    padding: 20px;
    height: auto;
    box-sizing: border-box;
    line-height: 20px;
  }
}
</style>
